<template>
  <div class="bg_fff main">
    <div class="btn-list">
      <el-button type="primary" icon="el-icon-refresh" size="small" @click="refreshAction">刷新</el-button>
    </div>
    <h3 class="title">
      <i class="el-icon-user-solid"></i>安卓版本管理
    </h3>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="版本:">
        <el-input v-model="valueedition" placeholder="全部"></el-input>
      </el-form-item>
      <span>渠道:</span>
      <el-select placeholder="未选择" v-model='valuechannel'>
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in ioslist"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
         
      </el-select>
       <el-button type="primary" @click="getfindAllAndroidVersion">查询</el-button>
      <el-form-item>
        <el-button type="danger" @click="dialogFormVisiblelist= true">添加</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="添加版本"  :visible.sync="dialogFormVisiblelist">
 <el-form :model="formlist">


    <el-form-item label="APK包" :label-width="formLabelWidth">
      <el-input v-model="formlist.apkUrl" autocomplete="off" placeholder="必选"></el-input>
      <el-upload class="upload-demo" :action="keyImgUpUrl+'/system/uploadFile'" multiple
        :limit="1" :on-success="success" list-type="picture" :before-upload="beforeAvatarUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    </el-form-item>
    
    <el-form-item label="版本名" :label-width="formLabelWidth">
      <el-input v-model="formlist.edition" autocomplete="off" placeholder="必选"></el-input>
    </el-form-item>
    
    <el-form-item label="版本号" :label-width="formLabelWidth">
      <el-input v-model="formlist.versionCode" autocomplete="off" placeholder="实例：20200525"></el-input>
    </el-form-item>
          <el-form-item label="渠道" :label-width="formLabelWidth">
      <el-select v-model="formlist.channel" placeholder="未选择">
          <el-option v-for="itemi in ioslist"
          :key="itemi"
          :label="itemi"
          :value="itemi"></el-option>
            
      </el-select>
    </el-form-item>
      <el-form-item label="更新内容" :label-width="formLabelWidth">
      <el-input type="textarea" v-model="formlist.content" placeholder="请填写该版本更新的内容(换行请在句尾添加<br>)"></el-input>
  </el-form-item>
 
    <el-form-item label="是否强制更新" :label-width="formLabelWidth">
      <el-select v-model="formlist.forcetype" placeholder="未选择">
        <el-option label="是" value="1"></el-option>
        <el-option label="否" value="0"></el-option>
      </el-select>
    </el-form-item>
           <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="formlist.remakes" autocomplete="off"></el-input>
    </el-form-item>
    </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
        <el-button size="medium" type="primary" @click="addAndroidVersion">提交</el-button>
    </el-form-item>
    
  </el-form>
</el-dialog>
    <div class="p10">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column label="序号" header-align="center" align="center">
           <template slot-scope="scope">
            <span>{{scope.$index +1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="edition" label="版本名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="versionCode" label="版本号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="channel" label="渠道" header-align="center" align="center"></el-table-column>
        <el-table-column prop="content" label="更新内容" header-align="center" align="center"></el-table-column>
        <el-table-column prop="cadddate" label="添加时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="optname" label="操作人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="remakes" label="备注" header-align="center" align="center"></el-table-column>
        <el-table-column prop="forcetype" label="是否强制更新" header-align="center" align="center">
             <template slot-scope="scope">
            <p v-if="scope.row.forcetype==0">否</p>
            <p v-else="scope.row.forcetype==1">是</p>
         
          </template>
        </el-table-column>
        <el-table-column prop="downloadurl" label="下载地址" header-align="center" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="block p20 tac">
      <el-pagination
        style="margin-top: 16px; text-align:center;"
        layout="total, prev, pager, next"
        :total="total"
        :page-size="formInline.pageSize"
        :current-page.sync="formInline.pageNo"
        @current-change="handleCurrentChange"
      ></el-pagination>

    </div>
  </div>
</template>
<script>
import { findAllAndroidVersion, allDataByAndroid,addAndroidVersion } from "@/request/api";
export default {
  data() {
    return {
      total: 0,
        valueedition: "",
      valuechannel:"",
      formInline: {
        edition: "",
        channel: "",
        pageNo: 1,
        pageSize: 20
      },
      timer: "",
      tableData: [],
      ioslist:['Iyou','xiaomi','baidu','yingyongbao','vivo','oppo','huawei','Samsung','meizu','sanliuling','sougou'],
       formlist: {
          apkUrl:"",
          edition: '',
          channel: '',
          content: '',
          remakes: '',
          apkUrl:"",
          versionCode:""
        },
        formLabelWidth: '100px',
        dialogFormVisiblelist:false,
        sessionIda:"",
        action_url:"/api/system/uploadFile"
    };
  },
  methods: {
    success(response, file, fileList) {
        if (response.code== "200") {
            this.$message({
                message: '上传成功',
                type: 'success'
            });
        } else {
            this.$message({
              message: '上传失败',
              type: 'warning'
            });
        }
        this.formlist.apkUrl=response.data.fileUrl
      },
    //查看
    lookAction(index, row) {
      this.$router.push({
        path: "/userInfo/detail",
        query: {
          userid: row.cuserid
        }
      });
    },
    getfindAllAndroidVersion() {
      findAllAndroidVersion(
        {
        pageNo:1,
        pageSize:10,
        edition:this.valueedition,
        channel:this.valuechannel
        }
      ).then(res => {
        console.log(res);

        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.total = parseInt(res.data.data.total);
        }
      });
    },
    refreshAction() {
      this.valueedition=""
      this.valuechannel=""
      this.getfindAllAndroidVersion();
    
    },
    addAndroidVersion(){
      let arr = `${this.formlist.content}` ;
      let t = this;   
      let formlist = t.formlist;
      if (!formlist.apkUrl ) {
        this.$message({
          message:'APK包不能为空',
          type: 'warning'
        });
        return false;
      }
      if (!formlist.edition) {
        this.$message({
          message:'版本名不能为空',
          type: 'warning'
        });
        return false;
      }
      if (!formlist.channel) {
        this.$message({
          message:'渠道不能为空',
          type: 'warning'
        });
        return false;
      }
      if (!formlist.content ) {
        this.$message({
          message:'更新内容不能为空',
          type: 'warning'
        });
        return false;
      }
      if (!formlist.forcetype ) {
        this.$message({
          message:'请选择是否强制更新',
          type: 'warning'
        });
        return false;
      }
      if (!formlist.versionCode ) {
        this.$message({
          message:'版本号不能为空',
          type: 'warning'
        });
        return false;
      }
      formlist.content = '<p style="font-size:16px;color:#666;">'+formlist.content+'</p>'
      addAndroidVersion({
        'apkUrl':formlist.apkUrl,
        'edition':formlist.edition,
        'channel':formlist.channel,
        'content':formlist.content,
        'remakes':formlist.remakes,
        'forcetype':formlist.forcetype,
        'versionCode':formlist.versionCode,
      }).then(res=>{
        console.log(res);
        if(res.data.code=="200"){
            t.$message({
              message: '添加成功',
              type: 'success'
            });
            t.getfindAllAndroidVersion();
            t.formlist = {
              apkUrl:"",
              edition: '',
              channel: '',
              content: '',
              remakes: '',
              apkUrl:"",
              versionCode:""
            }
        }else{
          t.$message({
            message: '添加失败',
            type: 'warning'
          });
        }
        t.dialogFormVisiblelist = false
      })
    },
    getallDataByAndroid() {
       return allDataByAndroid().then(res => {
          let arr = res.data.data
          function unique(arr){
              return Array.from(new Set(arr));
          }
          this.ioslist=unique(arr)
      });
    },
    onSubmit() {
      if (this.formInline.endDate == "" && this.formInline.startDate != "") {
        this.formInline.endDate = this.timer;
      }
      this.formInline.pageNo = 1;
      this.getLoadUserLossList();
    },
    //分页器
    handleCurrentChange(pgno) {
      this.formInline.pageNo = pgno;
      this.getfindAllAndroidVersion();
    },
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");       
      if (['apk'].indexOf(FileExt.toLowerCase()) === -1){            
        this.$message({ 
          type: 'warning', 
          message: '请上传后缀名为apk的安装包！' 
        });                
        return false;  
      }
    }
  },
  created() {
    this.getfindAllAndroidVersion();
    // this.getallDataByAndroid();

    let sessionIda = window.sessionStorage.getItem("tata_token")
    console.log(sessionIda);
    this.sessionIda = sessionIda

  
         
    
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }
};
</script>
<style lang='less' scoped>
.el-form-item__label{
  width: 70px;
}
.demo-form-inline {
  text-align: left;
  padding: 5px;
}
</style>
